/* Copyright 2021 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

#ptz-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: absolute;
}

#ptz-panel button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

#reset-all-container,
#panel-container {
  backdrop-filter: blur(10px);
  background: rgb(32, 33, 36, 0.9);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#reset-all-container {
  border-radius: var(--border-radius-rounded-with-short-side);
  height: 32px;
  margin-bottom: 8px;
}

#ptz-reset-all {
  align-items: center;
  display: flex;
  height: 100%;
  padding-inline-end: 16px;
  padding-inline-start: 7px;
}

#ptz-reset-all:focus::after {
  border-radius: var(--border-radius-rounded-with-short-side);
}

#ptz-reset-all>.icon {
  background-image: url(/images/ptz_reset_all.svg);
  height: 20px;
  margin-inline-end: 10px;
  width: 20px;
}

#ptz-reset-all>.text {
  color: var(--grey-200);
  font-family: var(--default-font-family);
  font-weight: 500;
}

#panel-container {
  --divider-color: rgba(255, 255, 255, 0.14);
  --divider-width: 1px;

  border-radius: 20px;
}

#panel-container button {
  --svg-width: 20px;
  --svg-height: 20px;
  --focus-ring-size: 8px;
  --focus-ring-style: circle;

  height: 48px;
  position: absolute;
  width: 48px;
}

#panel-container button:disabled::before {
  opacity: 0.38;
}

body:not(.has-pan-support) :is(#pan-left, #pan-right),
body:not(.has-tilt-support) :is(#tilt-up, #tilt-down),
body:not(.has-zoom-support) :is(#zoom-in, #zoom-out) {
  display: none;
}

/* Icons. */

#pan-left::before {
  content: url(/images/ptz_pan_left.svg);
}

#pan-right::before {
  content: url(/images/ptz_pan_right.svg);
}

#tilt-up::before {
  content: url(/images/ptz_tilt_up.svg);
}

#tilt-down::before {
  content: url(/images/ptz_tilt_down.svg);
}

#zoom-in::before {
  content: url(/images/ptz_zoom_in.svg);
}

#zoom-out::before {
  content: url(/images/ptz_zoom_out.svg);
}

#panel-container button::before {
  left: calc(50% - var(--svg-width) / 2);
  position: absolute;
  top: calc(50% - var(--svg-height) / 2);
}


/* Only P, Only Z */

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #panel-container,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #panel-container {
  height: 48px;
  width: 96px;
}

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #pan-left,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #zoom-in {
  left: 0;
}

body.has-pan-support:not(.has-tilt-support):not(.has-zoom-support) #pan-right,
body.has-zoom-support:not(.has-pan-support):not(.has-tilt-support) #zoom-out {
  right: 0;
}

/* Only T */

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #panel-container {
  height: 96px;
  width: 48px;
}

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #tilt-up {
  top: 0;
}

body:not(.has-pan-support).has-tilt-support:not(.has-zoom-support) #tilt-down {
  bottom: 0;
}

/* P, T */

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #panel-container {
  height: 144px;
  width: 144px;
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #pan-left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #pan-right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #tilt-up {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body.has-pan-support.has-tilt-support:not(.has-zoom-support) #tilt-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* P, Z */

body.has-pan-support:not(.has-tilt-support).has-zoom-support #panel-container {
  height: 48px;
  width: 192px;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #pan-left {
  left: 0;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #pan-right {
  left: 75%;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #zoom-in {
  left: 50%;
}

body.has-pan-support:not(.has-tilt-support).has-zoom-support #zoom-out {
  left: 25%;
}

/* T, Z */

body:not(.has-pan-support).has-tilt-support.has-zoom-support #panel-container {
  height: 144px;
  width: 96px;
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #tilt-up {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #tilt-down {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #zoom-out {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

body:not(.has-pan-support).has-tilt-support.has-zoom-support #zoom-in {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* P, T, Z */

body.has-pan-support.has-tilt-support.has-zoom-support #panel-container {
  border-radius: 20px;
  height: 192px;
  width: 192px;
}

/* TODO(b/172881094): Polish active visual look of clipped button. */

body.has-pan-support.has-tilt-support.has-zoom-support :is(#tilt-down, #tilt-up, #pan-left, #pan-right) {
  height: 100%;
  width: 100%;
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#tilt-down, #tilt-up, #pan-left, #pan-right)::before {
  left: var(--x);
  top: var(--y);
}

body.has-pan-support.has-tilt-support.has-zoom-support #tilt-down {
  --x: calc(calc(192px - var(--svg-width)) / 2);
  --y: calc(192px - 20px - var(--svg-height));

  clip-path: path('M 0 192 L 192 192 L 123 123 A 38 38 0 0 1 69 123 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #tilt-up {
  --x: calc(calc(192px - var(--svg-width)) / 2);
  --y: 20px;

  clip-path: path('M 0 0 L 192 0 L 123 69 A 38 38 0 0 0 69 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #pan-left {
  --x: 20px;
  --y: calc(calc(192px - var(--svg-height)) / 2);

  clip-path: path('M 0 0 L 0 192 L 69 123 A 38 38 0 0 1 69 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support #pan-right {
  --x: calc(192px - 20px - var(--svg-width));
  --y: calc(calc(192px - var(--svg-height)) / 2);

  clip-path: path('M 192 0 L 192 192 L 123 123 A 38 38 0 0 0 123 69 Z');
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#zoom-in, #zoom-out) {
  --radius: 38px;

  height: calc(var(--radius) * 2);
  width: var(--radius);
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-in {
  border-radius: 0 var(--radius) var(--radius) 0;
  left: 50%;
  top: calc(50% - var(--radius));
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-out {
  border-radius: var(--radius) 0 0 var(--radius);
  left: calc(50% - var(--radius));
  top: calc(50% - var(--radius));
}

/* Divider lines. */

/* TODO(b/184712316): Fix split line other P, T, Z cases. */
body:is(:not(.has-pan-support), :not(.has-tilt-support), :not(.has-zoom-support)) .ptz-divider {
  display: none;
}

.ptz-divider {
  background: var(--divider-color);
  position: absolute;
  width: var(--divider-width);
}

#ptz-divider1 {
  left: 0;
  top: 0;
  transform: rotate(-45deg);
  transform-origin: left top;
}

#ptz-divider2 {
  right: 0;
  top: 0;
  transform: rotate(45deg);
  transform-origin: right top;
}

#ptz-divider3 {
  bottom: 0;
  left: 0;
  transform: rotate(45deg);
  transform-origin: left bottom;
}

#ptz-divider4 {
  bottom: 0;
  right: 0;
  transform: rotate(-45deg);
  transform-origin: right bottom;
}

#ptz-zoom-divider {
  height: 16px;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
}

body.has-pan-support.has-tilt-support.has-zoom-support .ptz-divider {
  height: 98px;
}

body.has-pan-support.has-tilt-support.has-zoom-support :is(#zoom-in, #zoom-out) {
  border: var(--divider-width) solid var(--divider-color);
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-in {
  border-left-width: 0;  /* csschecker-disable-line left-right */
}

body.has-pan-support.has-tilt-support.has-zoom-support #zoom-out {
  border-right-width: 0;  /* csschecker-disable-line left-right */
}
